import React ,{ useState ,useEffect} from 'react'
import FnSon from './components/FnSon'
import axios from 'axios'
const FnApp =()=> {
    /*
        在函数组件定义数据
        1.引入useState
        2.  const [arr,setArr] = useState([1,2,3,4,5])
        arr 类似于类组件中的 
        state={
            arr:[]
        }
        setArr 就是修改我们arr的时候会用到 eg:  setArr([6,7,8,9,10])
        useState(xxxxx)  :xxxxx就是默认值
    */
    const [arr,setArr] = useState([1,2,3,4,5])
    const [list,setlist] = useState([])
    const [num,setNum] = useState(1)
    useEffect(() => {
        axios.get("/list").then(res=>{
            setlist(res.data.list)
        })
    }, []) // 当useEffect第二个参数是空数组的时候 就相当于componentDidMount 刚进页面执行
    const btn = () =>{
        console.log(111);
        setArr([6,7,8,9,10])
    }
    
    let my_fnson = {
        arr,
        num,
        btn,
        list
    }
    return (
        // let {arr} = this.state
        <div>
            fnapp
            {/* {
                arr.map(item=>(<p key={item}>{item}</p>))
            }
            <button onClick={btn}>点我</button> */}
            <FnSon {...my_fnson} />
        </div>
    )
}

export default FnApp
